<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <el-form
            :model="formInfo"
            ref="form"
            :inline="false"
            size="normal"
            label-width="180px"
            style="text-align: left;"
        >
            <!-- 标签页 -->
            <el-tabs v-model="activeName">
                <el-tab-pane label="基本信息" name="first">
                    <el-row :gutter="20">
                        <el-col :span="14" :offset="5">
                            <el-form-item label="文章标题" size="normal">
                                <el-input
                                    v-model="formInfo.title"
                                    placeholder="请输入标题"
                                    size="normal"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="文章文章分类" size="normal">
                                <el-select v-model="formInfo.cateid" placeholder="请选择分类">
                                    <el-option
                                        v-for="item in menuList"
                                        :key="item.id"
                                        :label="item.catename"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="文章作者" size="normal">
                                <el-input
                                    v-model="formInfo.author"
                                    placeholder="请输入作者"
                                    size="normal"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="文章标签" size="normal">
                                <el-checkbox
                                    :indeterminate="false"
                                    v-for="(item,index) in tagList"
                                    :key="index"
                                >{{item.tagname}}</el-checkbox>
                            </el-form-item>
                            <el-form-item label="阅读次数" size="normal">
                                <el-input
                                    v-model="formInfo.click"
                                    placeholder="请输入次数"
                                    size="normal"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="是否推荐" size="normal">
                                <el-switch v-model="formInfo.ishot" active-color="#13ce66"></el-switch>
                            </el-form-item>
                            <el-form-item label="缩略图" size="normal">
                                <el-upload action="api/upload" list-type="picture-card">
                                    <i class="el-icon-plus"></i>
                                </el-upload>

                                <el-dialog
                                    :visible="formInfo.pic.length?true:false"
                                    @close="formInfo.pic=''"
                                >
                                    <img
                                        width="100%"
                                        :src="formInfo.pic.length ? formInfo.picimg[0].url:''"
                                        alt
                                    />
                                </el-dialog>
                            </el-form-item>
                            <el-form-item size="normal">
                                <el-button type="primary" size="default" @click="fabusub">修改文章</el-button>

                                <el-button type="warning" size="default" @click="reset">清空</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="文章正文" name="second">
                    <quill-editor v-model="formInfo.content" ref="myQuillEditor"></quill-editor>
                    <el-form-item size="normal">
                        <el-button type="primary" size="default" @click="fabusub">修改文章</el-button>

                        <el-button type="warning" size="default" @click="reset">清空</el-button>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="关键字描述" name="third">
                    <el-row :gutter="20">
                        <el-col :span="14" :offset="5">
                            <el-form-item label="关键字" size="normal">
                                <el-input
                                    v-model="formInfo.keywords"
                                    placeholder="多个关键字请用英文逗号隔开"
                                    size="normal"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="描述" size="normal">
                                <el-input
                                    v-model="formInfo.description"
                                    placeholder="文章描述"
                                    size="normal"
                                ></el-input>
                            </el-form-item>
                            <el-form-item size="normal">
                                <el-button type="primary" size="default" @click="fabusub">修改文章</el-button>

                                <el-button type="warning" size="default" @click="reset">清空</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </el-form>
    </el-card>
</template>
<script>
import { mapState, mapActions } from "vuex";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
let defaultForm = {
    act: "edit",
    title: "",
    cateid: "",
    keywords: "",
    description: "",
    author: "",
    pic: "",
    click: "",
    content: "",
    ishot: false,
    status: 1,
};
export default {
    components: {
        quillEditor,
    },
    data() {
        return {
            activeName: "first",
            formInfo: {
                ...defaultForm,
            },
            articleForm: {
                act: "find",
                cateid: "",
                keywords: "",
                time: [],
                id: "",
                start: 1,
                pagesize: 10,
            },
            tagList: [],
        };
    },
    computed: {
        ...mapState(["menuList"]),
    },
    methods: {
        ...mapActions(["getMenuList"]),
        // 获取单个文章信息
        async findArticle() {
            this.articleForm.id = this.$route.params.id;
            let { data: res } = await this.$axios.get("api/article", {
                params: this.articleForm,
            });
            if (res.code !== 200) return this.$message.error(res.msg);
            console.log(res.data);
            this.formInfo = {
                act: "edit",
                ...res.data,
            };
            console.log(this.formInfo.picimg);
        },
        // 重置表单内容
        reset() {
            this.formInfo = {
                ...defaultForm,
            };
        },
        // 获取全部标签列表
        async getTagList() {
            let { data: res } = await this.$axios.get("api/tag", {
                params: {
                    act: "getlist",
                    start: 1,
                    pagesize: 100,
                },
            });
            if (res.code !== 200) return Message.error(res.msg);
            this.tagList = res.data;
        },
        // 已发布提交事件
        fabusub() {
            this.formInfo.status = 2;
            this.submit();
        },
        // 存草稿提交事件
        caogaosub() {
            this.formInfo.status = 1;
            this.submit();
        },
        // 提交事件
        async submit() {
            this.formInfo.ishot = this.formInfo.ishot ? 1 : 0;
            let { data: res } = await this.$axios.post(
                "api/article",
                this.formInfo
            );
            if (res.code !== 200) return this.$message.error(res.msg);
            this.$message.success("修改成功");
            this.$router.push("/article");
        },
    },
    mounted() {
        this.menuList.length || this.getMenuList();
        this.getTagList();
        this.findArticle();
    },
};
</script>
<style scoped>
.ql-editor {
    height: 300px;
}
.ql-container {
    margin-bottom: 20px;
}
</style>
